<template>
	<view class="">
		<view class="pr">
			<view class="select xflex-x-between xbs" @click.stop="ondblclick(keys)">
				<view class="xfz28 xc3">{{label}}</view>
				<view class="xflex-x">
					
					<view class=" xflex-x-between" :class="stateType == 1?'select_val':''" v-if="showData">
						<view class="xml12 xflex1 clamp ">
							{{showData}}
						</view>
						
						<image @click.stop="del()" v-if="delimg" class="select_val_icon xmr12" src="/static/image/icon_qx.png" mode=""></image>
					</view>
					<view class="select_w" v-else>{{placeholder}}</view>
					<image :class="show ? 'select_sicon_active' : ''" class="select_sicon xpl32" src="/static/image/icon_zk.png" mode=""></image>
				</view>
			</view>
			<view class="select_item pa" v-if="show">
				<scroll-view scroll-y="true" style="max-height: 550rpx">
					<view class="" v-for="(item, index) in list" :key="index">
						<view class="xflex-x xflex1">
							
								<view class="select_box_value xflex1 xml32" style="text-align: left;" @click.stop="oneLevel(item, index)">
									<view class="sele">
										{{ item[keyName] }}
									</view>
								</view>
								<view class="xflex-x xflex1" v-if="clabel">
									<view class="select_box xflex-x xflex1" @click.stop="onActive(index)">
										<!-- <view class="xflex-y-center" >
											<image
												:class="active === index ? 'select_eicom_active' : ''"
												class="select_eicom xml32"
												src="../../static/image/icon_zk.png"
												mode=""
												style="transform: rotate(90deg);"
											></image>
										</view> -->
										<view class="select_box_value xflex1" style="text-align: left;">
											<!-- {{ item[keyName] }} -->
											
											<view class="sele">
											{{clabel}}
											</view>
										</view>
										
									</view>
							</view>
						</view>
						<view v-if="active === index" class="select_ebox xbs xflex-x">
							<view class="select_biox" @click="twoLevel(k, v)" v-for="(k, v) in item[lName]">
								{{ k[tName] }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false,
			active:''
		};
	},
	props:{
		value: String,
		showData:{
			default:''
		},
		list:{
			// 数据
			type:Array,
			default:[]
		},
		keyName:{
			// 一级键名
			type:String,
			default:''
		},
		label:{
			// 一级对象的名称
			type:String,
			default:''
		},
		placeholder:{
			// 一级对象的名称
			type:String,
			default:''
		},
		lName:{
			// 二级对象的名称
			type:String,
			default:''
		},
		tName:{
			// 二级键名
			type:String,
			default:''
		},
		type:{
			type:String,
			default:'radio',//checkbox
		},
		stateType:{
			default:1
		},
		delimg:{
			default:true
		},
		clabel:{
			type:String,
			default:''
		},
		keys:{
			type:String,
			default:''
		}
	},
	emits:['update:value'],
	onLoad() {},
	methods:{
		onActive(e){
			if(this.active === e){
				this.active = ''
			}else{
				this.active = e
			}
		},
		oneLevel(e,i){
			console.log("一级",e);
			this.show = false
			 this.$emit('update:value', e)
		},
		twoLevel(e,i){
			console.log("二级");
			this.show = false
			this.$emit('update:value', e)
		},
		del(){
			this.$emit('update:value', '')
			this.show = false
		},
		onshow(){
			this.show = false
		},
		ondblclick(e){
			this.show = !this.show
			if(this.show == false) {
				e = ''
			}
			this.$emit('ondblclick',e)
		}
	}
};
</script>

<style lang="scss">
.select {
	width: 700rpx;
	// height: 100rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 37rpx 30rpx 37rpx 40rpx;
	
	&_val {
		width: 100%;
		height: 56rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 56rpx;
		color: #999999;
		&_icon{
			width: 30rpx;
			height: 30rpx;
		}
	}
	&_item {
		width: 100%;
		// max-height: 300rpx;
		right: 0;
		top: 140rpx;
		z-index: 3;
		// bottom: 10rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	&_item1 {
		width: 50%;
		height:500rpx;
		left: 0;
		top: 112rpx;
		// bottom: 10rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	&_box {
		margin: 12rpx;
		justify-content: flex-end;
		margin-right: 12rpx;
		border-right: 1px solid #eee;
		padding-right: 32rpx;
		// background-color: #eee;
		&_value {
			text-align: right;
		}
	}
	&_w {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	&_sicon {
		width: 17rpx;
		height: 10rpx;
		&_active {
			transform: rotate(180deg);
		}
	}
	&_eicom {
		width: 17rpx;
		height: 10rpx;
		transform: rotate(-90deg);
		// margin-right: 20rpx;
		&_active {
			transform: rotate(180deg);
		}
	}
	&_ebox {
		font-size: 28rpx;
		
		padding: 10rpx 0 0 64rpx;
		box-sizing: border-box;
		text-align: left;
		flex-wrap: wrap; 
	}
	&_biox {
		
	 background-color: #f5f5f5;
	 margin:4rpx 32rpx 24rpx 0;
	 padding: 4rpx 32rpx;
	}
}
.sele {
	background-color: #f5f5f5;
	display: inline-block;
	padding: 6rpx 36rpx;
	padding-top: 0;
	border-radius: 4rpx;
}
</style>
